<template>
	<div class="i-watermark-container">
		<div class="i-watermark-background">
			<div class="i-watermark-canvas" ref="i_watermark">
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { onMounted, ref, reactive } from 'vue';
	//https://www.jb51.net/javascript/294002itm.htm	
	onMounted(()=>{
		printWaterMark();
	});
	
	const i_watermark = ref();
	
	const printWaterMark = function() {
		const domId = "1.1234567890.0987654321";
		if (document.getElementById(domId) !== null) {
			document.body.removeChild(document.getElementById(domId));
		}
		//创建一个画布
		const can = document.createElement("canvas");
		//设置画布的长宽
		can.width = 200;
		can.height = 200;
		const cans = can.getContext("2d");
		//旋转角度
		cans.rotate((-15 * Math.PI) / 180);
		cans.font = "24px Vedana";
		//设置填充绘画的颜色、渐变或者模式
		cans.fillStyle = "rgba(200, 200, 200, 0.80)";
		//设置文本内容的当前对齐方式
		cans.textAlign = "left";
		//设置在绘制文本时使用的当前文本基线
		cans.textBaseline = "Middle";
		//在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
		cans.fillText("蒙商e贷", can.width / 8, can.height / 2);
		const div = i_watermark.value;
		div.style.width = document.documentElement.clientWidth + "px";
		div.style.height = document.documentElement.clientHeight + "px";
		div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
		document.body.removeChild(can);
	}
</script>

<style lang="less" scoped>
	.i-watermark-container {
		width: 100%;
		height: 100%;
	}
	.i-watermark-background {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.i-watermark-canvas {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
</style>